<template>
  <div id="container">
    <dv-border-box-12 backgroundColor="#19233Ddf" style="width: 1400px;padding: 20px;height:200px;margin-left: 30px"  >
      <div class="bg-color-black" >
        <div class="d-flex jc-center body-box">
          <temp :node-list="selectItem.nodeList" :link-list="selectItem.linkList" :prj="prj"></temp>
        </div>
      </div>
    </dv-border-box-12>
    <dv-border-box-12 backgroundColor="#19233Ddf" style="width: 1400px;padding: 20px;height:550px;margin-left: 30px"  >
      <div class="bg-color-black" >
        <div class="d-flex jc-center body-box">
          <div id="cesiumContainer">
            <div style="position: absolute;z-index:10;display: flex;flex-direction: column">
            </div>
          </div>
        </div>
      </div>
    </dv-border-box-12>

  </div>

</template>

<script>
let viewer = null;
import axios from "axios";
import * as Cesium from "cesium/Cesium";
import drawTunnel from "../d3/drawTunnel";
import Util_Projection from "../d3/Util_Projection";
// import sub_dataview from "../sub_dataview";
import vkbeautify from "vkbeautify";
import x2js from "x2js";
// import profile_model from "../profile_model"
let x2jsObj = new x2js();
let baseUrl = "";
export default {
  props:["prj"],
  data() {
    return {
      id : 0,
    };
  },
  /*
    页面初始化开始执行
  */
  created() {},
  /*
    界面初始化完毕执行
   */
  mounted() {
    this.initScene();
    this.drawLine();
  },
  methods: {
    initScene() {
      let options = {
        animation:false,   //如果设置为false，则不会创建'动画'小部件。
        baseLayerPicker:false,   //如果设置为false，则不会创建BaseLayerPicker小部件
        fullscreenButton:false,  //如果设置为false，将不会创建FullscreenButton小部件。
        vrButton:false,     //如果设置为true，将创建VRButton小部件。
        geocoder:false,     //如果设置为false，则不会创建Geocoder小部件。
        homeButton:false,      //如果设置为false，将不会创建HomeButton小部件。 -----------
        infoBox:false,         //如果设置为false，则不会创建InfoBox小部件。
        sceneModePicker:false,      //
        timeline:false,
        navigationHelpButton:false,
        navigationInstructionsInitiallyVisible:false,  //如果导航说明最初应该是可见的，则为true；如果直到用户明确单击该按钮，则不显示该说明，否则为false。
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
          //调用影响中文服务
          url:
            "http://{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" +
            "904d887e70ad2473628d011003ce14ca", //url地址
          layer: "tdtBasicLayer", //WMTS请求的层名称
          style: "default", //WMTS请求的样式名称
          format: "tiles", //MIME类型，用于从服务器检索图像
          tileMatrixSetID: "GoogleMapsCompatible", //	用于WMTS请求的TileMatrixSet的标识符
          subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], //天地图8个服务器
          minimumLevel: 0, //最小层级
          maximumLevel: 18 //最大层级
        })
      };
      viewer = new Cesium.Viewer("cesiumContainer", options);
      viewer._cesiumWidget._creditContainer.style.display = "none";

    },
    GML_Parser(data) {
        let selectFile = data;
        let xml_show = vkbeautify.xml(selectFile);
        let obj = x2jsObj.xml2js(xml_show);
        let detailShow = true;
        if (obj.LineString) {
          let data=obj.LineString.coordinates.__text
          let result = [];
          data = data.replace(/\r\n/g, "@");
          data = data.replace(/\n/g, "@");
          let list = data.split("@");
          list.forEach(one => {
            if (one.length > 0) {
              let sp = one.trim().split(" ");
              if (sp.length == 2) {
                result.push([sp[0],sp[1]]);
              }
            }
          });
          return result
        }
    },

    drawLine(){
      axios.get(`/api/prj/data?code=${this.prj}&objCode=PLAL`).then(res=>{
        console.log(res.data)
        let PLAL_data=res.data
        var filePath=[]
        for(let i=0;i<PLAL_data.length;i++){
          filePath.push(PLAL_data[i].FILE_FSET)
        }
        console.log(filePath)
        // let axis_data=[]
        let offset = {
          x: 11038980.4,
          y: 2918588,
          z: 1800
        };
        for(let i=0;i<filePath.length;i++){
        axios.get(`static/data/${this.prj}/${filePath[i]}`).then(res => {
          let axis=[]
          let result=this.GML_Parser(res.data)
          result.forEach(one => {
            let tmp={}
            tmp.x=one[0].replace("\t","")
            tmp.y=one[1].replace("\t","")
            axis.push(tmp)
          });
          axis.forEach(one => {
            let lnglat = Util_Projection.webMercator2LngLat(
              offset.x + parseFloat(one.x),
              offset.y + parseFloat(one.y)
            );
            one.lng = lnglat[0];
            one.lat = lnglat[1];
            one.z = 0
            // parseFloat(one.z) ;
          });
          var positions=[]
          for (var i = 0; i < 360; ) {
            var radians = Cesium.Math.toRadians(i);
            var x =  2*Math.cos(radians);
            var y =  2*Math.sin(radians);
            positions.push(
                [x,
                    y
                ]
            );
            i=i+10
          }
          var shape = { name: "平面线型—PLAL", outer: positions };
          let model = new drawTunnel(this.id+"PLAL",viewer, [shape, [axis,0,0,0]],"#FFFF00");
          model.draw();
          // axis_data.push(axis)
          console.log("Line Ok~")
          viewer.flyTo(viewer.entities);
          this.id+=1;
        });
        }

      })
    },
  }
};

</script>

<style>
#cesiumContainer {
  width: 100%;
  height:530px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.el-table{
  background: #2b334f8f !important;
  color:white !important
}

/*.el-table{*/
/*color:white;*/
/*}*/
.el-table th, .el-table tr,.el-table td{
  border: 0 !important;
  background-color: transparent !important;
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color:#fff !important;
  background-color: rgba(148, 144, 144, 0.3) !important
}
.el-table th, .el-table tr {
  background-color: transparent !important;
}
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
.el-table thead {
  color: white ;
  font-weight: 500;
  background-color: rgba(148, 144, 144, 0.3) !important
}

.el-table__body tr:hover > td{
  background-color:#2b334fff !important;
}
.current-row > td {
  background: #fe81048f !important;
}

#map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#mapContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

</style>
